<template>
	<!-- 弹出框 -->
  <view class="content">
    <view class="mask" v-if="isSelect" @touchmove.stop.prevent @click="closefun"></view>
    <view >
      <view >
        <view  class="ipt flex a-item j-content" :class="{'select':isSelect}"   @tap.stop="openfun"  >
          {{ num }}
          <view v-if="isSelect" class="cursor"></view>
        </view>
      </view>
      <view class="position">
        <uni-popup ref="popup" maskBackgroundColor="rgba(69,64,68,.6)" type="bottom"  @blur="closefun">
          <view class="mode">
            <!--			<view class="inp f-c-c">-->
            <!--				<text v-if="pass">-->
            <!--					<text v-for="(item,index) in num">*</text>-->
            <!--				</text>-->
            <!--				<text class="text f-c-c" v-else>{{num}}</text>-->
            <!--			</view>-->
            <view class="key f-sb-c">
              <view class="key-num ">
                <view  :hover-start-time="0" :hover-stay-time="0" class="keynum num" hover-stop-propagation hover-class="red1" @click="setnum('1')">1</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  class="keynum num" hover-stop-propagation hover-class="red1" @click="setnum('2')">2</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  class="keynum num" hover-stop-propagation hover-class="red1" @click="setnum('3')">3</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  class="keynum num" hover-stop-propagation hover-class="red1" @click="setnum('4')">4</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  class="keynum num" hover-stop-propagation hover-class="red1" @click="setnum('5')">5</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  class="keynum num" hover-stop-propagation hover-class="red1" @click="setnum('6')">6</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  class="keynum num" hover-stop-propagation hover-class="red1" @click="setnum('7')">7</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  hover-stop-propagation class="keynum num" hover-class="red1" @click="setnum('8')">8</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  hover-stop-propagation class="keynum num" hover-class="red1" @click="setnum('9')">9</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  hover-stop-propagation class="keynum flex a-item j-content char"  hover-class="red1" @click="closefun">取消</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  hover-stop-propagation class="keynum num" hover-class="red1" @click="setnum('0')">0</view>
                <view  :hover-start-time="0" :hover-stay-time="0"  hover-stop-propagation class="keynum num" hover-class="red1"  @click="setnum('.')">.</view>
              </view>
              <view class="btn">
                <view  :hover-start-time="0" :hover-stay-time="0"  class="delete flex a-item j-content char" hover-class="red1" @click="del">
                  <image class="delImg" src="http://121.41.75.32:8002/file/static/delete.png" ></image>
                </view>
                <view  :hover-start-time="0" :hover-stay-time="0"  class="delete flex a-item j-content char" hover-class="red1" @click="removeVal">清零</view>
                <view v-if="!ifPromotion"  :hover-start-time="0" :hover-stay-time="0"  class="confirm flex a-item j-content char" hover-class="red1" @click="confirm">确认</view>
                <view v-else >
                  <view  :hover-start-time="0" :hover-stay-time="0"  class="delete flex a-item j-content char" hover-class="red1" @click="closefun">确认</view>
                  <view  :hover-start-time="0" :hover-stay-time="0"  class="delete flex a-item j-content char" hover-class="red1" @click="addPromotionList">下单</view>
                </view>
              </view>

            </view>
          </view>
        </uni-popup>

      </view>
    </view>

  </view>

</template>

<script>

	/**
	 * ongetnum_ -> 绑定方法 数字变化
	 * getnum_   -> 绑定方法 点击确认
	 * */

	export default {
		name: "wly-keyboard",
		props: {
			leng: { //输入长度
				type: [String, Number],
				default:'10'
			},
			pass:{ // 是否开启密码模式
				type: Boolean,
				default:false
			},
			pnum: { //初始化数量
				type: [String, Number],
				default: '0'
			},

			decimal:{ // 保存几位小数
				type: [String, Number],
				default:0
			},
      ifPromotion:{
			  type: Boolean,
        default: 0
      },
      value:{
        type: [String, Number],
        default:''
      }
		},
    watch:{
		  value(n){
		    this.num = n || 0
      }
    },
		data() {
			return {
				num: '0', //初始化输入数字
        isSelect: false,
        clickDate: 0
			};
		},
		created() {
			//自定义初始化值
			this.num = this.value
		},
    methods: {
			// 模态状态改变
			popcha(e) {
					this.num = this.pnum;
			},

			// 显示弹窗
			openfun() {
        uni.hideKeyboard()
				this.$refs.popup.open()
        console.log(this.ifPromotion)
        this.$emit('open','1')
        this.isSelect = true
			},
			// 关闭弹窗
			closefun() {
				this.$refs.popup.close()
        this.$emit('close','')
        this.isSelect =  false
        this.$emit('blur','')
			},

			// 输入
			setnum(e) {
			  if (e === '.' && this.decimal == 0){
			    return
        }
				let num = String(this.value || '0');
				//输入长度小于设置
				if(num.length < this.leng){

				// 判断小数点
				let numof = num.indexOf('.');
				if (numof > -1) {  //小数点处理
					if(e != '.'){
						if (num === '0') {
							num = e;
						} else {
							num = String(num) + e;
						}
						// 设置保留几位
						let decimal = this.decimal;//小数点
						if(num.length > (numof+1)+decimal){
							num = num.substr(0, (numof+1)+decimal);
						}
					}
				} else {
					if (num === '0' && e !== '.') {
              num = e;
					} else {
						num = String(num) + e;
					}
				}

				this.num = num;
        this.$emit('update:value', num);//数字变化调用
				}
			},

			// 删除
			del() {
				let num = String(this.num);
				num = num.substr(0, num.length - 1);
				if (num.length == 0) {
					if(this.pass){
						this.num = '';
					}else{
						this.num = 0;
					}
				} else {
					this.num = num;
				}
        console.log('触发发送')
        this.num = this.num || 0
        console.log(this.num)
				this.$emit('update:value', this.num);//数字变化调用
			},
      removeVal(){
			  this.$emit('update:value','0')
      },
      addPromotionList(){
			  const date = new Date().getTime()
			  if ((date - this.clickDate) < 2000){
			    uni.showToast({title:"五秒内不允许重复点击",icon:'none'})
			    return
        }
        this.clickDate = date
			  this.$emit('addPromotionList')
      },
			// 确定
			confirm() {
				let num = String(this.num);

				if(num.charAt(num.length - 1) == '.'){ // 最后一位是小数点就去掉
					num = num.substr(0, num.length - 1);
					this.num = num;
				}

        this.$emit('submit', '');
				this.isSelect = false
        this.closefun()
			},

		}
	}
</script>

<style lang="scss">
	.mode {
    width: 100%;
		.f-c-c{
			display:flex;

			justify-content: center;
			align-items: center;
		}
		.f-sb-c{
			display:flex;
			justify-content: space-between;
			align-items: center;
		}

		.inp {
			height: 90rpx;
			background-color: #f1f1f1;

			.text {
				width: 100%;
				display: flex;
				height: 62rpx;
				background-color: #fff;
				border-radius: 8rpx;
			}
		}

		.key {
			width: 100%;
			.key-num {
				width: 588rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
        background-color: rgb(103,103,103);
				.keynum {
          flex-wrap: wrap;
          display: flex;
          align-items: center;
          justify-content: center;
					width: 195rpx;
					height: 100rpx;
          color: #ffffff;
          font-family: 微软雅黑;
          font-size: 36rpx;
          border: rgb(103,103,103) 1px solid;
				}
				.keynum0 {
					width: 354rpx;
				}
			}

			.btn {
				width: 174rpx;
        background-color: rgb(103,103,103);
				.delete {
					height: 100rpx;
          border: rgb(103,103,103) 1px solid;
          color: #ffffff;
          font-family: 微软雅黑;
          font-size: 36rpx;
				}

				.confirm {
					text-align: center;
					height: 200rpx;
					box-shadow: #dcdcdc 2px 1px 3px 0px;
          font-family: 微软雅黑;
          color: #ffffff;
          font-size: 36rpx;
				}
			}
		}
	}
  .ipt{
    width: 150rpx;
    height: 80rpx;
    border-radius: 10rpx;
    border: rgba(200,200,200,0.5) solid 1px;
    text-align: center;
    z-index: 999;
  }
  .select{
    border: #409eff solid 1px;
  }
  .position{
    position: fixed;
    left: 0;
    z-index: 999;
  }
  .mask{
    width: 100%;
    height: 100%;
    z-index: 2;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0);
    position: absolute;
  }
.content{
}
.num{
  background-color: rgb(69,64,68);
  }
.char{
  background-color: rgb(48,46,49);
}
.delImg{
  width: 70rpx;
  height: 70rpx;
}
.cursor{
  border-left: #07bb07 solid 1px;
  height: 50rpx;
  animation: cursor-blinks 1.2s infinite steps(1, start);
}

  @keyframes cursor-blinks {
    0% {
      opacity: 1;
      display: block;
    }
    50% {
      opacity: 0;
      display: none;
    }
    100% {
      opacity: 1;
      display: block;
    }
  }
.red1{
  background-color: #ee5c2b !important;
}
</style>
